<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/answer.js"></script>
    <title>Document</title>
    <style>
        legend {
            font-size: 16px;
            line-height: 30px;
        }

        div {
            font-size: 14px;
            line-height: 2;
        }

        pre {
            background-color: #f2f2f2;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <form action="#" id="testForm">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <div>
                <input type="checkbox" id="checkAll"><label for="checkAll">全选</label>
                <input type="checkbox" id="reverse"><label for="reverse">反选</label>
            </div>
            <div>
                <input type="checkbox" name="lang" value="javascript" class="checked"> JavaScript
            </div>
            <div>
                <input type="checkbox" name="lang" value="python" class="checked"> Python
            </div>
            <div>
                <input type="checkbox" name="lang" value="ruby" class="checked"> Ruby
            </div>
            <div>
                <input type="checkbox" name="lang" value="java" class="checked"> Java
            </div>
            <div>
                <input type="checkbox" name="lang" value="php" class="checked"> PHP
            </div>
            <div>
                <input type="submit" value="提交" id="button">
            </div>
        </fieldset>
    </form>
    <pre>

        <b>要求：</b>

        自行创建外部js文件：answer.js文件，并引入到本html文件中。实现下列功能的代码请写在js文件中。为了方便阅卷，js文件请和html文件放在同一级目录下。

        绑定合适的事件处理函数，实现一下逻辑：

        1. 当用户选中“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

        2. 当用户去掉“全不选”时，自动不选中所有语言；

        3. 但该用户点击“反选”时，自动把所有语言的复选框状态反转（选中的变为未选，未选的变为选中）；
        
        4. 当用户把所有语言都手动勾上是，“全选”被自动勾选，并变为“全不选”；
        
        5. 当用户手动去掉选中至少一种语言时，“全不选”自动变为“全选”，且全选复选框不选中；
        
        6. 点击提交按钮后，弹框将所有选中的语言展示出来。

        P.S. 同学自由选择是要用原生js实现，还是用jQuery来实现。

    </pre>

</body>

</html>